<template>
  <u-modal v-model="alertShow" :content="modalContent"></u-modal>
  <view class="container">
    <view class="login-logo">
      <image src="../../static/logo.jpg" mode=""></image>
    </view>
    <view class="UPInArea">
      <u-form ref="uForm" border-bottom="false">
        <u-form-item label="用户名" label-width="100" border-bottom="false">
          <u-input v-model="userNames" type="text" border="true" />
        </u-form-item>
        <u-form-item label="密码" label-width="100" border-bottom="false"
          ><u-input v-model="passwords" type="password" border="true"
        /></u-form-item>
      </u-form>

      <view>
        <u-button type="success" shape="circle" @click="test1()">登陆</u-button>
      </view>

      <view class="registerWord" @click="toRegisterPage()"
        ><a>还没有账号？快注册一个吧～</a></view
      >
    </view>

    <view class="check-word">
      <u-checkbox
        v-model="checkConfirm"
        shape="circle"
        @change="checkBtn"
      ></u-checkbox>
      <text>登录即表明您同意我们的</text>
      <a class="color-word">《服务协议》</a>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useGlobalStore } from '@/store'
import { useUserStore } from '@/store/modules/user'
import { loginFn } from '@/utils/modules/user.js'

const globalStore = useGlobalStore()
const userStore = useUserStore()

const userNames = ref('giftedprofessor')
const passwords = ref('hsyqbjh520')
// 初始从本地存储中获取用户名和密码，如果有的话
userNames.value = uni.getStorageSync('userName') || ''
passwords.value = uni.getStorageSync('password') || ''
const checkConfirm = ref(true)
const alertShow = ref(false)
const modalContent = ref('')

// 导航到注册页面
function toRegisterPage() {
  uni.navigateTo({ url: '/pages/Register/Register' })
}

// 用户点击同意服务协议复选框
function checkBtn() {
  checkConfirm.value = !checkConfirm.value
}

// 登录逻辑
function loginUP() {
  if (!checkConfirm.value) {
    alertShow.value = true
    modalContent.value = '请先同意《服务协议》'
    return
  }

  loginFn({
    user: {
      openId: userNames.value,
      password: passwords.value,
    },
  })
    .then((res) => {
      console.log('登录成功:', res.data)
      uni.setStorageSync('user_id', res.data._id)
      uni.setStorageSync('avatar', res.data.avatarUrl)
      uni.setStorageSync('nickName', res.data.nickName)
      // 登录成功后，获取微信用户信息
      test()
    })
    .catch((err) => {
      console.error('登录失败:', err)
    })
}
const test1 = () => {
  uni.showModal({
    title: '授权',
    content: '是否授权',
    success: () => {
      test()
    },
  })
}
const test = () => {
  uni.login({
    provider: 'weixin',
    success(loginRes: any) {
      // 获取到登录凭证code后，可以调用微信开放能力的API获取用户信息
      // console.log(loginRes, '----loginRes')
      uni.request({
        url: 'https://api.weixin.qq.com/sns/jscode2session',
        data: {
          appid: 'wx7c19e9a830cb3e8f',
          secret: '437cc90d1d2fa22c9a58de584666396d',
          js_code: loginRes.code,
          grant_type: 'authorization_code',
        },
        success(res) {
          // 在请求成功的回调函数中，可以获取到用户信息
          const userInfo: any = res.data
          console.log(userInfo)
          uni.setStorageSync('openId', userInfo.openid)
          loginFn({
            user: {
              openId: userInfo.openid,
              userName: userNames.value,
              password: passwords.value,
            },
          })
            .then((res) => {
              console.log('登录成功:', res.data)
              uni.setStorageSync('user_id', res.data._id)
              uni.setStorageSync('avatar', res.data.avatarUrl)
              uni.setStorageSync('nickName', res.data.nickName)
              uni.setStorageSync('userName', res.data.userName)
              uni.setStorageSync('passWord', res.data.nickName)
              // 登录成功后，获取微信用户信息
              uni.reLaunch({
                url: '/pages/index/index',
              })
            })
            .catch((err) => {
              console.error('登录失败:', err)
            })
        },
      })
    },
  })
  // uni.getUserProfile({
  //   desc: '用于完善会员资料', // 这里填写一些说明文字，告诉用户你为什么请求这个权限
  //   success: (profileRes) => {
  //     console.log(profileRes.userInfo) // 用户同意授权后，可以获取到用户的头像、昵称等信息
  //     userStore.avatarUrl = profileRes.userInfo.avatarUrl
  //     uni.reLaunch({
  //       url: '/pages/index/index',
  //     })
  //   },
  //   fail: () => {
  //     // 用户拒绝授权的处理逻辑
  //     uni.showToast({
  //       title: '获取用户信息失败',
  //       icon: 'none',
  //     })
  //   },
  // })
}

// 获取微信用户信息
function getWechatUserInfo() {
  uni.getUserProfile({
    desc: '用于完善会员资料', // 提示信息
    success: (profileRes) => {
      console.log('微信用户信息：', profileRes.userInfo)
      // 可以在这里更新用户信息到你的store或者发送到服务器
      userStore.$patch({
        avatarUrl: profileRes.userInfo.avatarUrl,
        nickName: profileRes.userInfo.nickName,
        // 根据需要更新更多字段
      })
    },
    fail: (err) => {
      console.error('获取微信用户信息失败：', err)
    },
  })
}

onMounted(() => {
  // 这里可以添加页面加载时需要执行的逻辑，如检查登录状态
  if (uni.getStorageSync('openId')) {
    uni.reLaunch({
      url: '/pages/index/index',
    })
  }
})
</script>

<style lang="scss">
.container {
  .alertBlock {
    z-index: 999999;
    position: fixed;
    // align-items: center;
    margin-left: 35%;
    height: 200rpx;
  }

  .login-logo {
    width: 250rpx;
    height: 250rpx;
    margin-top: 120rpx;
    margin-left: 250rpx;
    margin-bottom: 150rpx;

    image {
      width: 100%;
      height: 100%;
      border-radius: 30rpx;
    }
  }

  .UPInArea {
    width: 80%;
    margin-left: 10%;
    .userInput {
      margin-bottom: 10rpx;
    }
    .registerWord {
      float: right;
      color: darkgray;
      font-size: 25rpx;
      margin-top: 10rpx;
    }
  }

  .check-word {
    display: flex;
    flex-direction: row;
    width: 80%;
    margin-left: 15%;
    height: 50rpx;
    font-size: 25rpx;
    margin-top: 500rpx;

    .color-word {
      color: #4cd964;
    }
  }
}
</style>
